// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 引入css
import './index.css';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// React 当中样式的指定
// 行内指定
const h1 = (
  <h1 style={{ color: 'red', backgroundColor: 'pink', width: '250vw' }}>
    Hello React
  </h1>
);

const fn = () => 'title';

// 类名指定
const h2 = <h2 className={fn()}>Hello React2222</h2>;
const h44 = <h2 className={(() => 'title')()}>Hello React2</h2>;
const h22 = <h2 className={'title'}>Hello React2</h2>;
const h33 = <h2 className="title">Hello React2</h2>;

// 渲染这个标签（React 元素）
root.render(
  <div>
    {h1} {h2}
  </div>
);
